<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ie9兼容</title>
	</head>
	<body>
		<h3>jquery.form实现</h3>
		<form enctype="multipart/form-data">
			<input type="file" name="file"  id="file" onchange="ajaxSubmit(this)"/>
		</form>
		<br/>
		<h3>js原生实现</h3>
		<form id="iform" target="formIframe" method="post" action="http://localhost:8888/upload" enctype="multipart/form-data">
			<input type="file" name="file"  id="file" onchange="getfiles(this)"/>
		</form>
		
		<iframe id="formIframe" name="formIframe" style="display:none;"></iframe>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
		<script type="text/javascript">
			//jquery的ajaxSubmit
			function ajaxSubmit(){
				console.log("ajaxSubmit");
				console.log($("#iform").formSerialize());
				var ajaxFormOption = {
	                type: "post",  //提交方式 
	                dataType:"text/html", //数据类型 
	                url:"http://localhost:8888/upload",
	                success:function(res){
	                	console.log("success");
	                	console.log(res);
	                },
	                error:function(error){
	                	console.log("error");
	                    console.log(error);
	                },
	                complete: function (res) { //提交成功的回调函数 
	                	console.log('complete');
	                    console.log(res);
	                }
	            };
	            $("#iform").ajaxSubmit(ajaxFormOption);
				return false;
			}
			
			
			var formIframe = document.getElementById("formIframe");
			formIframe.onload=function(res){
				console.log("onload");
				console.log(res.target.contentWindow.document.body.innerText)
			}
			function getfiles(self){
				var iform=document.getElementById('iform');
				iform.submit();
			}
			
		</script>
	</body>
</html>
